<script lang="ts" setup>
import type { FormInstance } from 'element-plus';

import { useUserStore } from '@/stores/user';

definePage({
  name: 'LoginPage',
  meta: { title: '登录', asside: false },
});
defineOptions({ name: 'IndexPage' });

const title = import.meta.env.VITE_APP_TITLE;

const form = reactive({
  principal: '',
  password: '',
});
const rules = ref({
  principal: [{ required: true, message: '请输入账号' }],
  password: [{ required: true, message: '请输入密码' }],
});

const formRef = shallowRef<FormInstance>();

const router = useRouter();

const userStore = useUserStore();

const { execute, isLoading } = useAsyncState(
  async () => {
    await formRef.value!.validate();
    await userStore.login(form.principal, form.password);
    ElMessage.success('登录成功');
  },
  null,
  {
    immediate: false,
  },
);

watchEffect(() => {
  if (userStore.isLogined) {
    router.replace({ path: '/' });
  }
});
</script>

<template>
  <div class="login-page">
    <div class="login-container">
      <div class="app-title">
        {{ title }}
      </div>
      <div class="sub-title">welcome to login</div>
      <el-form ref="formRef" :rules="rules" :model="form" :disabled="isLoading">
        <el-form-item>
          <el-input v-model="form.principal" placeholder="请输入账号">
            <template #prefix>
              <el-icon class="i-custom:username" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" placeholder="请输入密码" type="password" show-password>
            <template #prefix>
              <el-icon class="i-custom:password" />
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button text size="small" class="self-start"> 忘记密码？ </el-button>
      <el-button class="login-button" :loading="isLoading" @click="() => execute()">
        登录
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-page {
  width: 100vw;
  height: 100vh;
  background-image: url('./assets/bg.png');
  background-size: 100% 100%;
}

.login-container {
  position: absolute;
  top: 50%;
  right: 270px;
  display: flex;
  flex-direction: column;
  width: 520px;
  padding: 60px 44px;
  background: rgb(78 145 255 / 20%);
  border: 1px solid #507fc0;
  border-radius: 20px;
  box-shadow: inset 0 0 5px 2px rgb(115 170 255 / 20%);
  transform: translateY(-50%);

  --el-component-size: 60px;
  --el-fill-color-blank: rgb(36 77 150 / 70%);
  --el-font-size-base: 24px;
}

.app-title {
  font-size: 34px;
  font-weight: bold;
  line-height: 48px;
  color: #eaf7ff;
  text-align: center;
}

.sub-title {
  position: relative;
  align-self: center;
  margin: 18px 0 66px;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  color: #dbf2ff;

  &::before {
    left: -50px;
  }

  &::after {
    right: -50px;
  }

  &::before,
  &::after {
    position: absolute;
    top: 50%;
    width: 41px;
    height: 1px;
    content: '';
    background-color: #95b6bc;
  }
}

.login-button {
  height: 60px;
  margin: 74px 0 16px;
  margin-left: 0;
  font-size: 24px;
  font-weight: 500;
  background: #4e87e7;
  border-radius: 6px;
  box-shadow: inset 0 0 5px 0 rgb(247 251 255 / 50%);

  --el-color-primary: #fff;
}
</style>
